<!DOCTYPE html>
<html lang="en">

<head>
    <meta>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="./js/store.legacy.min.js"></script>
</head>

<body>
    <button style="padding: 10px; margin: 10px;" id="clearLocal" onclick="store.clearAll()">清除缓存</button>
    <!-- <img width="100%" data-src='./images/1.jpg' src="./images/default.gif"> -->
    <img width="100%" data-src='./images/5.jpg' src="./images/default.gif">
    <img width="100%" data-src='./images/6.jpg' src="./images/default.gif">
    <img width="100%" data-src='./images/2.png' src="./images/default.gif">
    <img width="100%" data-src='./images/3.png' src="./images/default.gif">
    <img width="100%" data-src='./images/4.png' src="./images/default.gif">
    <img width="100%" data-src='./images/5.png' src="./images/default.gif">
    <img width="100%" data-src='./images/6.png' src="./images/default.gif">
    <img width="100%" data-src='./images/7.png' src="./images/default.gif">
    <img width="100%" data-src='./images/4.jpg' src="./images/default.gif">
    <script type="text/javascript">
    //获取img url
    var imgAY = document.querySelectorAll('img');
    var srcImg = [];
    for (var i = 0; i < imgAY.length; i++) {
        srcImg.push(imgAY[i].getAttribute('data-src'));
    }

    //需要删除的图片缓存
    var delSrcImg = {};
    var _delSrcImg = store.get('delSrcImg');
    delSrcImg = (_delSrcImg == undefined ? {} : _delSrcImg);

    console.log(delSrcImg);

    //启动缓存
    var imgBase = {};
    localStrogeImg(srcImg);

    /**
     * [localStrogeImg 图片本地缓存]
     * @Author   zhanggongze
     * @DateTime 2017-06-01
     * @param    {[array]}    srcImg [图片data-src属性]
     * @return   {[type]}           [description]
     */
    function localStrogeImg(srcImg) {

        //获取缓存数据
        var oCaches = store.get('imgCache');
        var cacheArray = []; //缓存多张图片

        imgBase = (oCaches == undefined ? {} : oCaches);

        //检查是否已经缓存
        if (JSON.stringify(imgBase) != '{}') {

            for (var k = 0; k < srcImg.length; k++) {

                var isCache = false;

                for (key in oCaches) {
                    if (key == srcImg[k]) {
                        cacheImg(k)
                        isCache = true;
                    }
                }

                if (!isCache) {
                    // console.log('有新图片,缓存需要更新了!!!!');

                    loadImg(srcImg[k], k);
                }
            }

        } else {
            console.log('第一次访问');
            for (var j = 0; j < srcImg.length; j++) {
                //存储至本地的对象
                loadImg(srcImg[j], j);
            }
        }

        //读取缓存图片
        function cacheImg(m) {
            var index = srcImg[m];
            imgAY[m].setAttribute('src', oCaches[index]);
        }

        //读取服务器上的图片
        function loadImg(src, index) {

            var oImg = new Image();
            oImg.src = src;

            oImg.onload = function() {
                //展示图片
                imgAY[index].setAttribute('src', src);
                //转码
                imgBase[src] = getBase64Image(oImg);

                //获取需要删除的缓存
                var del = null;
                for (item in delSrcImg) {
                    if (src == item) {
                        console.log(item);
                        del = item;
                    }
                }

                //首先判断是否有需要删除的缓存
                if (del == src) {
                    // console.log('删除最开始的一张图片缓存');
                    console.log('缓存空间不足,需要删除最开始的图片缓存---' + del);
                    delete oCaches[del];
                    // store.set('imgCache', oCaches);

                } else {}

                //将64位的编码保存至本地
                try {

                    store.set('imgCache', imgBase);

                } catch (e) {

                    var _delCount = store.get('delCount');
                    var _count = (_delCount == undefined ? 0 : _delCount['count']);

                    store.remove('delCount');

                    _count++;
                    store.set('delCount', {
                        "count": _count
                    });

                    // console.log(_count);
                    // var oC = store.get('imgCache');

                    for (var i = 0; i < _count; i++) {

                        //记录 删除了的图片
                        delSrcImg[srcImg[i]] = 1;
                        store.set('delSrcImg', delSrcImg);

                        
                        var _key = srcImg[i];
                        delete oCaches[_key];

                    }

                    store.remove('imgCache');
                    store.set('imgCache', oCaches);
                    console.log(e);
                }
            };
        };

        //ID选择器
        function selectId(str) {
            return document.querySelector(str);
        }

        //元素选择器
        function selectAll(str) {
            return document.querySelectorAll(str);
        }

        //转码
        function getBase64Image(img) {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var dataURL = canvas.toDataURL("image/jpg");
            return dataURL
        }
        /**
         * [combineObj 合并两个对象]
         * @Author   zhanggongze
         * @DateTime 2017-06-02
         * @param    {[type]}    o1 [主对象]
         * @param    {[type]}    o2 [被合并的对象]
         * @return   {[type]}       [obj]
         */
        function combineObj(obj1, obj2) {
            var obj = {};
            for (item in obj1) {
                obj[item] = obj1[item];
            }
            for (item in obj2) {
                obj[item] = obj2[item];
            }
            return obj;
        }

    }
    </script>
</body>

</html>
